<template>
  <div class="scratchCard-wrap" v-if="countTime !== '抽奖结束' || scratchStatus === 'hinge'">
    <div id="scratchBox"  v-show="cardInfo || prizeInfo">
      <div class="prizeBox" v-if="prizeInfo">
        <h3 v-if="prizeInfo.lotteryType != 3">恭喜中奖</h3>
        <div v-if="prizeInfo.lotteryType === 3">
          <div class="content">未中奖</div>
        </div>
        <div v-else>
          <div class="content">{{prizeInfo.lotteryName}}{{prizeInfo.amount && ` ${prizeInfo.amount}元`}}</div>
          <div class="desc">
            <div v-if="prizeInfo.isMail === 0" class="prize-info">
              {{prizeInfo.lotteryType === 0 ? '车辆领取时间请等待客服通知': '服务费抵用券'}}
            </div>
            <div v-else class="prize-address">
              <div class="has-address" v-if="prizeData">
                <div class="add-item address-nowarp">{{prizeData.mailAddress}}</div>
                <div class="add-item">{{prizeData.mailName}}<span>{{prizeData.mailPhone}}</span></div>
              </div>
              <div class="no-address" v-else @click.prevent.stop="goToAddAddress">
                <i class="icon-add-outline"></i><span :id="prizeInfo.id">请选择收货地址</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div :class="`maskTip${scratchStatus}`" v-show="!cardInfo">
      <div class="tips">幸运大抽奖 汽车开回家</div>
      <div class="guajiang-btn" @click.prevent.stop="roll">点击开奖</div>
    </div>
    <toast :open="toastVisible" :delay="true" :commitFlag="toastFlag" @close="closeToast">
      <div slot="tipmes">{{toastMes}}</div>
    </toast>
  </div>
</template>

<script type="text/ecmascript-6">
  // import * as PIXI from 'pixi.js';
  // const [App, Graphics, Sprite, Loader, Text, TextStyle, Container
  // ] = [PIXI.Application, PIXI.Graphics,
  //   PIXI.Sprite, PIXI.loader, PIXI.Text, PIXI.TextStyle, PIXI.Container];
  import functionalTool from '../../../utils/functionTools';
  import {lottery, editAddress} from '../../../mock/mock';
  import toast from '../../../components/feedback/toast';
  import Jsbridge from '../../../utils/jsbridge';
  /*
  * 抽奖卡模块
  * @param scratchStatus (String) 刮卡状态
  * @param toastVisible (Boolean) 弹框是否可见
  * @param toastMes (String) 弹框内容
  * @param rollFlag (Boolean) 抽奖开关
  * @param userId (String) 用户ID
  * @param account (String) 用户账号
  * @param prizeInfo (Obj) 抽奖后返回信息
  * @param prizeData (Obj) 用户id对应的奖品信息
  * */
  export default {
    name: 'scratchCard',
    data () {
      return {
        scratchStatus: '',
        toastVisible: !1,
        toastMes: '',
        toastFlag: !0,
        rollFlag: !0,
        userId: functionalTool.getUrlParam('accountId'),
        account: functionalTool.getUrlParam('account'),
        prizeInfo: null,
        jsbridge: new Jsbridge(),
        prizeData: null
      }
    },
    props: {
      countTimeBegin: {
        type: Boolean,
        default: false
      },
      cardInfo: {
        type: Object,
        default: null
      },
      countTime: {
        type: String,
        default: ''
      }
    },
    mounted () {
      this.prizeInfo = this.cardInfo;
      if (this.prizeInfo && this.prizeInfo.mailAddress) {
        this.prizeData = {
          mailAddress: this.prizeInfo.mailAddress,
          mailPhone: this.prizeInfo.mailPhone,
          mailName: this.prizeInfo.mailName
        };
      }
    },
    methods: {
      // // 初始化刮刮卡
      // generateCard () {
      //   const box = document.getElementById('scratchBox');
      //   const ratio = 0.5;
      //   let boxWidth = window.getComputedStyle(box).width;
      //   boxWidth = boxWidth.substr(0, boxWidth.length - 2);
      //   let boxHeight = ratio * boxWidth;
      //   const dpr = window.devicePixelRatio;
      //   this.scale = boxWidth / 460;
      //   this.app = new App({
      //     width: 460,
      //     height: 230,
      //     transparent: !0,
      //     resolution: dpr
      //   });
      //   box.appendChild(this.app.view);
      //   this.app.renderer.autoResize = true;
      //   this.app.renderer.resize(boxWidth, boxHeight);
      //   this.createBrush();
      //   Loader.load(() => {
      //     // 添加遮罩
      //     const [overMaskTexture, bgMaskTexture] = [Loader.resources['cardMask'].texture,
      //       Loader.resources['prizeBg'].texture];
      //     // 设置遮罩
      //     const overMask = new Sprite(overMaskTexture);
      //     overMask.width = this.app.screen.width;
      //     overMask.height = this.app.screen.height;
      //     // 设置奖品面板
      //     const bgMask = new Sprite(bgMaskTexture);
      //     bgMask.width = this.app.screen.width;
      //     bgMask.height = this.app.screen.height;
      //     const prizeTitle = new Text('恭喜中奖', new TextStyle({
      //       fontSize: 22 * this.scale,
      //       fill: '#ffffff'
      //     }));
      //     const prizeContent = new Text('北汽EV260使用权8年', new TextStyle({
      //       fontSize: 27 * this.scale,
      //       fontWeight: 'bold',
      //       fill: '#ffffff'
      //     }));
      //     const prizeLine = new Graphics();
      //     prizeLine.beginFill(0xffffff);
      //     prizeLine.drawRoundedRect(0, 0, 400 * this.scale, 2, 1);
      //     prizeLine.endFill();
      //     prizeTitle.position.set(this.app.screen.width / 2, 40 * this.scale);
      //     prizeContent.position.set(this.app.screen.width / 2, prizeTitle.y + prizeTitle.height / 2 + 56 * this.scale);
      //     prizeLine.position.set(this.app.screen.width / 2 - 200 * this.scale, prizeContent.y + prizeContent.height / 2 + 50 * this.scale);
      //     prizeTitle.anchor.set(0.5);
      //     prizeContent.anchor.set(0.5);
      //     const prizeBox = new Container();
      //     prizeBox.addChild(bgMask);
      //     prizeBox.addChild(prizeTitle);
      //     prizeBox.addChild(prizeContent);
      //     prizeBox.addChild(prizeLine);
      //     this.app.stage.addChild(overMask);
      //     this.app.stage.addChild(prizeBox);
      //     // 添加mask
      //     this.renderTexture = PIXI.RenderTexture.create(this.app.screen.width, this.app.screen.height);
      //     this.renderTextureSprite = new Sprite(this.renderTexture);
      //     this.app.stage.addChild(this.renderTextureSprite);
      //     // 将mask覆盖在overMask上
      //     prizeBox.mask = this.renderTextureSprite;
      //     this.app.stage.interactive = true;
      //     this.app.stage.buttonMode = !0;
      //     this.app.stage.on('pointerdown', this.pointerDown);
      //     this.app.stage.on('pointerup', this.pointerUp);
      //     this.app.stage.on('pointerupoutside', this.pointerUp);
      //     this.app.stage.on('pointermove', this.pointerMove);
      //   });
      // },
      // 创建刮卡点
      // createBrush () {
      //   let brush = new Graphics();
      //   brush.beginFill(0xffffff);
      //   brush.drawCircle(0, 0, 12 * this.scale);
      //   brush.endFill();
      //   this.brush = brush;
      // },
      // // 按下事件
      // pointerDown (event) {
      //   this.dragging = !0;
      //   this.pointerMove(event);
      // },
      // // 抬起事件
      // pointerUp (event) {
      //   this.dragging = !1;
      // },
      // // 滑动事件
      // pointerMove (event) {
      //   if (this.dragging && this.canScratch) {
      //     this.brush.position.copy(event.data.global);
      //     this.app.renderer.render(this.brush, this.renderTexture, false, null, false);
      //   }
      // },
      // 抽奖方法
      roll () {
        if (!this.rollFlag) {
          return;
        }
        this.rollPrize().then(() => {
          this.rollFlag = !0;
        });
      },
      // 抽奖接口
      async rollPrize () {
        this.rollFlag = !1;
        try {
          const resData = await lottery({
            userId: this.userId,
            account: this.account
          });
          if (resData.data.code === '200') {
            this.scratchStatus = ' hinge';
            this.prizeInfo = resData.data.data;
          } else {
            this.showToast(resData.data.text, !1);
          }
        } catch (e) {
          this.showToast('接口错误', !1);
        }
      },
      // 调用原生选择地址
      goToAddAddress (e) {
        const id = e.target.id;
        if (this.prizeData) {
          return;
        }
        this.jsbridge.call('goToSelectAddress', {
          accountId: this.userId
        }, (addressObj) => {
          const obj = JSON.parse(addressObj);
          this.editAddress(obj, id).then((res) => {
            res === 'registerOk' && (this.prizeData = obj);
          });
        })
      },
      async editAddress (addressObj, id) {
        try {
          const resData = await editAddress({
            lotteryId: id,
            mailAddress: addressObj.mailAddress,
            mailPhone: addressObj.mailPhone,
            mailName: addressObj.mailName
          });
          if (resData.data.code === '200') {
            return 'registerOk';
          } else {
            this.showToast(resData.data.text, !1);
          }
        } catch (e) {
          console.log(e);
          this.showToast(e, !1);
        }
      },
      showToast (mes, toastFlag) {
        this.toastMes = mes;
        this.toastFlag = toastFlag;
        this.toastVisible = !0;
      },
      closeToast (v) {
        this.toastVisible = v;
      }
    },
    components: {
      toast
    }
  }
</script>

<style rel="stylesheet/stylus" lang="stylus">
  @import '../../../assets/css/mixin.styl';
  .scratchCard-wrap
    position relative
    height rpx(280)
    width rpx(490)
    background-image url("../../../assets/img/guajiang.png")
    background-size 100% 100%
    margin auto
    padding rpx(30) 0
    box-sizing border-box
    #scratchBox
      position absolute
      width rpx(460)
      height rpx(230)
      display block
      left rpx(15)
      top rpx(25)
      z-index 99
      background-image linear-gradient(to right, #ffa03b, #f97624)
      display flex
      justify-content center
      align-items center
      font-size rpx(27)
      color #fff
      .prizeBox
        text-align center
        & h3
          height rpx(86)
          line-height rpx(86)
        .content
          font-size rpx(36)
          background-color transparent
        .desc
          margin-top rpx(16)
          width rpx(400)
          border-top 1px solid #fff
          font-size rpx(24)
          .prize-info
            height rpx(64)
            line-height rpx(64)
          .prize-address
            height rpx(64)
            padding-top rpx(4)
            .has-address
              position relative
              .add-item
                text-align left
                line-height rpx(32)
                height rpx(32)
                & span
                  margin-left rpx(10)
                &.address-nowarp
                  width rpx(400)
                  overflow hidden
                  white-space nowrap
                  text-overflow ellipsis
              & i
                position absolute
                right 0
                top rpx(20)
                font-size rpx(32)
            .no-address
              display flex
              height rpx(64)
              align-items center
              & i
                margin-right rpx(10)
    .maskTip
      position absolute
      width rpx(460)
      height rpx(230)
      display block
      left rpx(15)
      top rpx(25)
      background-color #e3e3e3
      z-index 999
      .tips
        position relative
        color: #eb6100
        font-size $fontsize-large-x
        text-align center
        padding rpx(30) 0
        z-index 999
      .guajiang-btn
        position relative
        background-image url("../../../assets/img/guajiangjianbian.png")
        background-size 100% 100%
        height rpx(62)
        width rpx(304)
        font-size $fontsize-medium
        text-align center
        line-height rpx(62)
        margin rpx(30) auto
        color #fff
      &.hinge
        z-index 9999
        animation hinge 800ms linear alternate forwards

    &.scratchCard-wrap:nth-child(1)
      margin-top rpx(20)

  @keyframes hinge {
    0% {
      transform-origin: top left
    }

    0%,20%,60% {
      -webkit-transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out
    }

    20%,60% {
      -webkit-transform: rotate(80deg);
      transform: rotate(80deg);
      transform-origin: top left
    }

    40%,80% {
      -webkit-transform: rotate(60deg);
      transform: rotate(60deg);
      -webkit-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      opacity: 1
    }

    to {
      -webkit-transform: translate3d(0,700px,0);
      transform: translate3d(0,700px,0);
      opacity: 0
      display none
    }
  }
</style>
